<template>
   <view class="center">
		
		<view class="center_top">
			<view class="mask"></view>
		</view>
		
		<view class="center_box_bg">
			<view class="profily" style="display: flex;">
				<div>
					<u-avatar v-if="userInfo.sex==0" :src="userInfo.headUrl" mode="circle" size='large' show-sex='true' sex-icon='woman'></u-avatar>
					<u-avatar v-else :src="userInfo.headUrl" mode="circle" size='large' show-sex='true' sex-icon='man'></u-avatar>
				</div>
				<div style='margin-top: 5rpx;'>
					<view>
						<text class="text" style="font-size: 17px; font-weight: 800;">{{userInfo.realName}}</text>
						<text style="margin-left: 20rpx;">{{ $u.timeFrom(userInfo.lastLoginTime, 'yyyy-mm-dd') }} 活跃</text>
					</view>
					<!-- 班级or在校工作岗位 -->
					<view style="margin-left: 20px; margin-top: 10px;">
						<text v-if="userInfo.identity=='就读'" class="text" style="margin-left: 0rpx; font-size: 15px; font-weight: 800;">{{userInfo.majorClass}}班</text>
						<text v-else class="text" style="margin-left: 0rpx; font-size: 15px; font-weight: 800;">{{userInfo.postSchool}}</text>
						<text>({{userInfo.enterTime}} - {{userInfo.graduateTime}})</text>
						<text style="font-weight: 800;">{{userInfo.educationBackgroundName}}</text>
					</view>
					<view style="margin-left: 20px; margin-top: 10px;">
						<view v-if="userInfo.identity=='就读'" class="identity1">
							<text>{{userInfo.identity}}</text>
						</view>
						<view v-else class="identity2">
							<text>{{userInfo.identity}}</text>
						</view>
					</view>
				</div>
			</view>
		</view>
		
		<!-- 所在城市、行业等 -->
		<view class="box1">
			<view class="profily">
				<view style="display: flex; margin-top: -20rpx;">
					<div style='width: 250rpx;'>所在城市</div>
					<div>{{userInfo.liveCity}}</div>
				</view>
				<u-line color="#e8e8e8" length='100%' :hair-line='false' margin="15rpx 0rpx"/>
				<view style="display: flex; margin-top: 10rpx;">
					<div style='width: 250rpx;'>当前行业</div>
					<div>{{userInfo.occupationalName}}</div>
				</view>
				<u-line color="#e8e8e8" length='100%' :hair-line='false' margin="15rpx 0rpx"/>
				<view style="display: flex; margin-top: 10rpx;">
					<div style='width: 250rpx;'>工作单位</div>
					<div>{{userInfo.workUnit}}</div>
				</view>
				<u-line color="#e8e8e8" length='100%' :hair-line='false' margin="15rpx 0rpx"/>
				<view style="display: flex; margin-top: 10rpx;">
					<div style='width: 250rpx;'>当前职位</div>
					<div>{{userInfo.position}}</div>
				</view>
				<u-line color="#e8e8e8" length='100%' :hair-line='false' margin="15rpx 0rpx"/>
				<view style="display: flex; margin-top: 10rpx; margin-bottom: -15rpx;">
					<div style='width: 250rpx;'>单位/公司介绍</div>
					<div>未填</div>
				</view>
			</view>
		</view>
		
		<!-- 交换名片（是否隐藏联系方式的后续）后续完善 -->
		<!-- <view class="box2">
			<view class="profily">
				
			</view>
		</view> -->
		
		<!-- 自我介绍 -->
		<view class="box3">
			<view class="profily">
				<view style="display: flex; margin: -10rpx 0rpx;">
					<div style='width: 250rpx;'>自我介绍</div>
					<div>未填</div>
				</view>
			</view>
		</view>
		
		<!-- 提供资源 -->
		<view class="box4">
			<view class="profily">
				<view style="display: flex; margin: -10rpx 0rpx;">
					<div style='width: 250rpx;'>提供资源</div>
					<div>未填</div>
				</view>
			</view>
		</view>
		
		<!-- 希望需求 -->
		<view class="box5">
			<view class="profily">
				<view style="display: flex; margin: -10rpx 0rpx;">
					<div style='width: 250rpx;'>希望需求</div>
					<div>未填</div>
				</view>
			</view>
		</view>
			
		<!-- <view class="baiban"></view> -->
		
    </view>
</template>

<script>
    export default {
        data() {
            return {
               userInfo: '',
            }
        },
        onLoad(userInfo) {
		   if(!userInfo) {
			   uni.showToast({
			   	icon:"none",
			   	title:"详情获取失败，请重试"
			   })
		   } else {
			   this.getUserInfo(userInfo.id)
		   }
        },
        methods: {
			async getUserInfo(openId){
				const params = {
					page: 1,
					size: 10,
					openId: openId
				}
				await this.$u.api.userSelectBy(params).then(res =>  {
					console.log("用户详情",res.data);
					if(res.code!="200") {
						uni.showToast({
							icon:"none",
							title:"详情获取失败，请重试"
						})
					} else {
						this.userInfo = res.data[0]
					}
				})
			}
        }
    }
</script>

<style lang="scss">
    .content {
       height: 15vh;
    }
	page {
		height: 100%;
	}
	.profily,
	.profily_header {
		border-radius: 8px;
	}
	.center {
		height: 100%;
		&_top {
			height: 15%;
			width: 100%;
			background: url('http://qiniu.chzuchen.xyz/other/969f8ad950a44587b1a4bc0ad1a2c783.jpg') no-repeat 50% 50%;
			background-size: cover;
	
			// background: #E6E6E6;
			.mask {
				background: rgba(0, 0, 0, .4);
				height: 100%;
			}
		}
	
		&_box_bg {
			background: #F9F9F9;
			position: relative;
	
			.profily {
				position: absolute;
				width: 90%;
				// border:1px solid #F7F7F7;
				margin: 0 auto;
				top: -100upx;
				left: 5%;
				background: #FEFEFE;
				padding: 35upx;
				box-sizing: border-box;
				box-shadow: 2px 2px 5px #bebebe;
			}
		}
	}
	.baiban {
		background: #FEFEFE;
		height: 250upx;
	}
	.text {
		margin-left: 20px;
		font-size: 30upx;

	}
	.box1 {
		position: relative;
		padding-top: 13px;
		margin-top: 70px;
		.profily {
			positio: absolute;
			width: 90%;
			height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.box2 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.box3 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.box4 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.box5 {
		position: relative;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			height: auto;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 2px 2px 5px #bebebe;
		}
	}
	.identity1 {
		background-color: #55aaff; 
		color: #275178;
		border-radius: 8px;
		width: 40px;
		text-align: center;
	}
	.identity2 {
		background-color: #fde6d2;
		color: #f37b1d;
		border-radius: 8px; 
		width: 60px;
		text-align: center;
	}
</style>